<template>
  <div class="mingxi" style=" height: inherit;  border:0px solid red;">
    <MkQueryContainer v-loading="loadingData" style="margin-right: 6px;">
      <template #header>
        <el-form label-width="auto" ref="queryForm" :inline="true">
          <el-form-item label="关键字">
            <el-input @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
          </el-form-item>
          <el-form-item>
            <MkButtonQuery @click="search"> </MkButtonQuery>
            <MkButtonAdd @click="add"></MkButtonAdd>
          </el-form-item>
        </el-form>
      </template>
      <MkTable :data="tableData" v-loading="loading">
        <MkColumn prop="title" label="标题" autoWidth />
        <MkColumnOption @show="query" @delete="del" deleteShowFile="title">
          <template #default="{ row }">
            <el-button icon="ele-EditPen" size="small" text @click="edit(row)">编辑</el-button>
          </template>
        </MkColumnOption>
      </MkTable>
      <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
        @query="search" layout="total, sizes, prev, pager, next," />
    </MkQueryContainer>

    <div style="width: calc(100% - 300px);  height: inherit;  border:0px solid blue;" v-loading="loadingData">
      <a-space size="large" style=" padding:10px">
        <MkButtonChecked icon='ele-Grid' :checked='true' size="middle">表格</MkButtonChecked>
        <MkButtonChecked icon='ele-Grid' :checked='false' size="middle">看板</MkButtonChecked>
        <MkButtonChecked icon='ele-Histogram' :checked='false' size="middle">图表</MkButtonChecked>
        <MkButtonChecked icon='ele-Plus' :checked='false' size="middle"></MkButtonChecked>
      </a-space>
      <div
        style="width: 100%; height: calc(100% - 80px);  border-radius: 5px; border:0px solid orange; background-color: #F8F8F8;">
        <MkTableView ref="tableViewRef" :data="tableViewData.data" :columns="tableViewData.columns" viewId="1" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MkTableView, defaultDataProcessConfig, type DataProcessConfig, type ColumnLayout } from '/@/componentsMaike/tables/MkTableView/index'
import { BasPrintDraftApi, BasPrintDraftOutput } from '/@/api/bas/BasPrintDraft';
import { usePageQuery, useLoadingFetch } from '/@/hooks'
import { clog, showSuccess } from '/@/utils'
import { enumCode } from '/@/const'
// import { column_data } from './mockData'

defineOptions({
  name: 'MkDataPage',
});

const editQueryPage = ref();

const { fetch, loading: loadingData } = useLoadingFetch(BasPrintDraftApi.query4Tabulator);

const { searchParam, total, tableData, loading, search } = usePageQuery<BasPrintDraftOutput>(BasPrintDraftApi.page)
searchParam.category = enumCode.PrintCategory.智能表格;

const tableViewData = ref({ data: [], columns: [] });

onMounted(() => {
  search();
})

const add = () => {
  editQueryPage.value?.open();
}

const edit = (row: any) => {
  editQueryPage.value?.open(row);
}

const del = async (row: any) => {
  // 打开删除确认弹窗
  row.isDelete = true;
  await BasPrintDraftApi.update(row);
  search();
  showSuccess();
}

const query = async (row: any) => {
  var res = await fetch({ id: row.id })
  //var res = await BasPrintDraftApi.query4Tabulator({ id: row.id })
  //var res = column_data;
  tableViewData.value.columns = res.data.columns;
  tableViewData.value.data = res.data.t1;
  console.log(tableViewData.value);

}

</script>

<style lang='scss' scoped>
.mingxi {
  box-sizing: border-box;
  display: flex;
  position: relative;

  >div:first-child {
    width: 300px;
  }

  >div {
    box-sizing: border-box;
    height: 100%;
  }
}
</style>